<template>
  <div class="father">
    <div class="head">
      <div class="search">
        <div class="item">
          <div class="item1">
            <img src="@/assets/tenlogo.jpg" width="100%" height="100%" opacity="0">
          </div>
          <div class="item2">
            <router-link to="/r_search" width="100%" height="100%">
              <el-input
                :placeholder= "placeholders"
                prefix-icon="el-icon-search"
                v-model="input2">
              </el-input>
            </router-link>
          </div>
          <div class="item3">
            <router-link to="/messages">
              <img src="@/assets/信息-01.png" alt="信息" width="100%" height="100%" opacity="0.5">
            </router-link>
          </div>
        </div>
      </div>
      <div class="tabbar">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" text-color="#000" active-text-color="red" router>
          <el-menu-item index="/real" class="el">华为</el-menu-item>
          <el-menu-item index="/h_walk" class="el">鸿蒙智行</el-menu-item>
          <el-menu-item index="/h_select" class="el">华为智选</el-menu-item>
          <el-menu-item index="/environment" class="el">生态周边</el-menu-item>
        </el-menu>
      </div>
    </div>
    <transition name="fade">
      <div class="body">
        <div>
          <stzb_main></stzb_main>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
// eslint-disable-next-line camelcase
import stzb_main from './shengtaizhoubian/stzb_main.vue'
import BScroll from 'better-scroll'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'environment',
  components: { stzb_main },
  data () {
    return {
      activeIndex: '/environment',
      count: 0,
      placeholders: '微泵液冷手机壳',
      data: ['微泵液冷手机壳', 'FreeBuds Pro 3', '平板', 'mate60', '微泵', '手机', 'gt 4', '充电宝', 'p60', '乐臻版', '微泵液冷手机壳', 'FreeBuds Pro 3', '平板', 'mate60', '微泵', '手机', 'gt 4', '充电宝', 'p60', '乐臻版', '微泵液冷手机壳', 'FreeBuds Pro 3', '平板', 'mate60', '微泵', '手机', 'gt 4', '充电宝', 'p60', '乐臻版']
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key)
      console.log(keyPath)
    }
  },
  mounted () {
    setInterval(() => {
      this.count++
      if (this.count > this.data.length - 1) {
        this.count = 0
      }
      this.placeholders = this.data[this.count]
    }, 2000)
    this.$nextTick(() => {
      // eslint-disable-next-line no-undef
      this.scroll = new BScroll('.body', {
        click: true,
        mouseWheel: true
      })
    })
  }
}
</script>

<style scoped>
.father{
  width: 450px;
  height: 100%;
  background-color: #fff;
}
.head{
  height: 15%;
  background-color:aqua;
}
.body{
  width: 450px;
  height: 535px;
  overflow: hidden;
  background-color: #fff;
  border-bottom: solid 1px gray;
}
.search{
  height: 60%;
  width: 100%;
  background-color: #2b4b6b;
}
.tabbar{
  height:40%;
  width: 100%;
}
.el{
  width: 25%;
}
.fade-enter{
  opacity: 0;
  transform: translateX(100%);
}
.fade-leave-to{
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
}
.fade-enter-active, .fade-leave-active {
  transition: all .5s ease;
}
.item{
  display: flex;
  height: 100%;
  background-color:#fff;
}
.item1{
  width: 30%;
  background: #fff;
}
.item2{
  width: 60%;
  padding-top: 10px;
}
.item3{
  padding: 10px;
  width: 10%;
  margin-top: 5px;
}
</style>
